<template>
    <ElCard shadow="hover" class=" h-[100%]">
        <template #header>
            <div class="card-header">
                概览
            </div>
        </template>
        <ElSkeleton :loading="loading" animated :rows="4">
            <ElRow :gutter="20" justify="space-between">
                <ElCol :span="12" class="cardItem" v-for="(dataValue, dataKey) in dataInfo" :key="dataKey">
                    <el-card shadow="hover" style="background-color:#f9f9f9;">
                        <div class="text-center">{{ dataKey }}</div>
                        <div class="text-center text-20px mt-7px" style="color:var(--el-color-primary);">
                            <!-- todo：页面跳转 -->
                            <span class="cursor-pointer"> {{ dataValue }}</span>
                        </div>
                    </el-card>
                </ElCol>
            </ElRow>
        </ElSkeleton>
    </ElCard>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getInfrastructureInfoAPI } from '@/api/systemMonitor'
const loading = ref(true)
let dataInfo = reactive({})


onMounted(() => {
    const getAllApi = async () => {
        return await Promise.all([getInfrastructureInfoAPI()])
    }
    getAllApi().then((result) => {
        dataInfo = {
            ...result[0].data,
        }
    }).finally(() => {
        loading.value = false;
    })
})
</script>
<style lang="less" scoped>
.cardItem {
    margin-top: 20px;

    &:nth-child(1),
    &:nth-child(2) {
        margin-top: 0px;
    }

}
</style>